<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>collumn</title>
		<link rel="stylesheet" type="text/css" href="stylesheets/main.css" />
		<link rel="stylesheet" type="text/css" href="http://res.mpre.cnsuning.com/common/style/base/2.0/base.css" />
		<style type="text/css">
			ul {
				margin: 0 .4rem;
				-moz-column-count: 2;
				/* Firefox */
				-webkit-column-count: 2;
				/* Safari and Chrome */
				column-count: 2;
				-moz-column-gap: 0;
				/* Firefox */
				-webkit-column-gap: 0;
				/* Safari and Chrome */
				column-gap: .4rem;
			}
			
			li {
				height: 200px;
				line-height: 200px;
				text-align: center;
				margin-bottom: .4rem;
			}
			
			li:nth-child(2n) {
				background: lightcoral;
			}
			
			li:nth-child(3n) {
				background: lightgreen;
			}
			
			li:nth-child(3n+1) {
				background: lightgray;
			}
			
			li:nth-child(4n) {
				background: lightpink;
			}
		</style>
	</head>

	<body>
		<!--collumn 布局的方式：整体的排序方式是先左侧，左侧无区域排放li，再右侧，新增数据后-->
		<div class="sn-content">
			<ul>
				<li>1</li>
				<li style="height: 180px;">2</li>
				<li style="height: 160px;">3</li>
				<li>4</li>
				<li style="height: 180px;">5</li>
				<li style="height: 160px;">6</li>
				<li>7</li>
				<li style="height: 220px;">8</li>
				<li style="height: 200px;">9</li>
			</ul>
		</div>

	</body>

</html>